<!--
 * @author hugh
 * @time  2021-01-10 11:40
 * @title  登录页面
 * @desc
 -->
<template>
  <div class="login heigth-fill flex text-center justify-center align-center">

    <div class="flex justify-center align-center text-center padding-sm">
      <div class="padding-sm" style="background-color: white;border-radius: 0.625rem;width: 26.5rem;">
        <img class="images" src=" http://www.vmeshou.com/upload/images/20180912/WechatIMG6681006560.jpeg" />
        <h3>Vue3.0&TypeScript</h3>
        <h4>后台系统登录</h4>
        <el-form label-width="80px" class="demo-ruleForm">
          <el-form-item label="账户名称" class="text-white">
            <el-input v-model="ruleForm.username" type="text" clearable placeholder="请输入账户名称"></el-input>
          </el-form-item>
          <el-form-item label="账户密码" class="text-white">
            <el-input type="password" v-model="ruleForm.password" clearable :minlength="6" placeholder="请输入账户密码"></el-input>
          </el-form-item>
          <el-button type="primary" style="width: 100%;" @click="submitForm()">立即登录</el-button>
        </el-form>
      </div>
    </div>

  </div>
</template>
<script lang="ts">
  import {
    defineComponent,
    getCurrentInstance,
    toRefs,
    reactive
  } from 'vue'
  import {
    useRouter
  } from 'vue-router';
  import {
    useStore
  } from "vuex";
  import jsmd5 from 'js-md5'
  export default defineComponent({
    name: 'login',
    components: {},
    setup() {
      //路由
      const router = useRouter();
      //vuex
      const store = useStore();

      //绑定挂载全局对象
      const {
        proxy
      } = getCurrentInstance() as any;

      const {
        login
      } = proxy.$api.Other;
      //console.log(store.state.user)
      //定义参数集合
      const data = reactive({
        ruleForm: {
          username: "admin",
          password: '123456',
          grant_type: process.env.VUE_APP_BASE_GRANT_TYPE,
          client_id: process.env.VUE_APP_BASE_CLIENT_ID,
          client_secret: process.env.VUE_APP_BASE_CLIENT_SECRET
        },
        rules: {
          pass: [{
            validator: '',
            trigger: 'blur'
          }],
          account: [{
            validator: '',
            trigger: 'blur'
          }]
        }
      });
      /**
       * 登录用户
       */
      function submitForm() {
       data.ruleForm.password = jsmd5(data.ruleForm.password);
       login(data.ruleForm).then((res: any) => {
         if (res.token) {
           store.commit("login", res);
         } 
         router.push("/");
       }).catch((err: any) => {
         console.log(err);
         router.push("/");
       })

      }

      function resetForm(formName: string) {
        // this.$refs[formName].resetFields();
      }
      //包装参数列表
      const refData = toRefs(data);

      return {
        ...refData,
        submitForm,
        resetForm
      }
    }
  })
</script>
<style scoped>
  .login {
    background-image: url(../../assets/backgroud.jpeg);
    background-size: 100% 100%;
  }
</style>
